<template>
  <view>
    <!-- {{ data }}
    {{ formData }} -->
    <!-- {{ formData }} -->
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
      <template v-for="item in inputlist">
        <!-- {{ item }} -->
        <formselect
          v-if="item.type == 'select'"
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></formselect>
        <pcs
          v-else-if="item.type == 'pcs'"
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></pcs>
        <dz
          v-else-if="item.type == 'dz'"
          :item="item"
          :data.sync="formData"
          v-model="formData[item.value]"
        ></dz>
        <StepControl
          v-else-if="item.type == 'StepControl'"
          :item="item"
          :data.sync="formData"
          v-model="formData[item.value]"
        ></StepControl>
        <pt
          v-else-if="item.type == 'pt'"
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></pt>
        <yzm
          ref="formyzm"
          v-else-if="item.type == 'yzm'"
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></yzm>
        <calendar
          v-else-if="item.type == 'calendar'"
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></calendar>
        <datetimepicker
          v-else-if="item.type == 'time'"
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></datetimepicker>

        <forminput
          v-else
          :item="item"
          :data="formData"
          v-model="formData[item.value]"
        ></forminput>
      </template>
    </u--form>
  </view>
</template>

<script>
  import forminput from "./components/forminput.vue";
  import formselect from "./components/formselect.vue";
  import pcs from "./components/pcs.vue";
  import dz from "./components/dz.vue";
  import qs from "qs";
  import pt from "./components/pt.vue";
  import StepControl from "./components/StepControl.vue";
  import yzm from "./components/yzm.vue";
  import calendar from "./components/calendar.vue";
  import datetimepicker from "./components/datetimepicker.vue";
  export default {
    components: {
      datetimepicker,
      calendar,
      yzm,
      forminput,
      formselect,
      pcs,
      dz,
      pt,
      StepControl,
    },
    props: {
      data: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      inputs: {
        typeof: Array,
        default: () => {
          return [];
        },
      },
      setdefaultValuefalg: {
        typeof: Boolean,
        default: false,
      },
    },
    asyncComputed: {
      async inputlistasync() {
        let formData = uni.$u.deepClone(this.formData);
        let propsdata = uni.$u.deepClone(this.data);
        let propsinputs = uni.$u.deepClone(this.inputs);

        if (!this.inputFlag) {
          return [];
        }
        let r = [];
        for (let key in propsinputs) {
          let e = propsinputs[key];
          if (typeof e == "function") {
            r = r.concat(
              await e.call(this, {
                propsdata,
                formData,
              })
            );
          } else if (e.callback) {
            let item = e.callback.call(this, propsdata, formData);
            r = r.concat(item);
          } else if (e.callbackasync) {
            let item = await e.callbackasync.call(this, propsdata, formData);
            r = r.concat(item);
          } else {
            r.push(e);
          }
        }

        return r;
      },
    },
    computed: {
      inputlist() {
        if (!this.inputlistasync) {
          return [];
        }
        let r = this.inputlistasync.filter((e) => {
          if (e.type == "yzm") {
            if (
              this.$z.$cookie.getCookie("WpassSmsflag") !=
              this.$store.state.user.USearch.uUser
            ) {
              return true;
            }
          } else {
            return this.$z.inputif(e, this.formData);
          }
        });
        // console.log(r, "rrr");
        return r;
      },
      rules() {
        let r = {};
        if (!this.inputlist) {
          return {};
        }
        this.inputlist.forEach((e) => {
          let rules = e.rules || e.rule || false;
          if (rules) {
            r[e.value] = rules.map((e) => {
              return {
                ...e,
                trigger: "blur",
                message: this.$z.$t(e.message),
              };
            });
          } else if (e.type == "yzm") {
            r[e.value] = [
              {
                required: true,
                message: "请输入" + e.label,
                trigger: "blur",
              },
            ];
          }
        });

        return r;
      },
    },
    watch: {
      data: {
        handler() {
          this.formData = {
            ...this.formData,
            ...this.data,
          };
          // for (let key in ) {
          //   this.$set(this.formData, key, this.data[key]);
          // }
          // this.$forceUpdate();
        },
        immediate: true,
      },
      inputlist: {
        handler(n, o) {
          if (!n) {
            return;
          }
          o = o || [];

          const isEqual = (obj1, obj2) =>
            qs.stringify(obj1) === qs.stringify(obj2);
          let edtinputso = new Set([
            ...o.filter((e) => !n.some((f) => isEqual(e, f))),
          ]);

          let edtinputs = new Set([
            ...n.filter((e) => !o.some((f) => isEqual(e, f))),
          ]);
          if (
            !this.setdefaultValuefalg &&
            Object.keys(this.data).length != 0 &&
            qs.stringify(this.formData) == qs.stringify(this.data)
          ) {
            return;
          }

          if (
            !(
              Object.keys(this.data).length != 0 &&
              qs.stringify(this.formData) == qs.stringify(this.data)
            )
          ) {
            edtinputso.forEach((e) => {
              delete this.formData[e.prop];
            });
          }
          if (
            Object.keys(this.data).length != 0 &&
            qs.stringify(this.formData) == qs.stringify(this.data)
          ) {
            edtinputs.forEach((e) => {
              if (!e.value) {
                return;
              }
              if (!Object.keys(this.formData).includes(e.value)) {
                this.$set(this.formData, e.value, "");
              }
              if (this.formData[e.value] || this.formData[e.value] == "0") {
              } else if (e.defaultValue) {
                this.$set(this.formData, e.value, e.defaultValue);
              }
            });
          } else {
            edtinputs.forEach((e) => {
              if (!e.value) {
                return;
              }
              if (!Object.keys(this.formData).includes(e.value)) {
                // this.formData[e.value] = "";
                this.$set(this.formData, e.value, "");
              }
              if (
                e.defaultValue ||
                e.defaultValue == "0" ||
                e.defaultValue == ""
              ) {
                this.$set(this.formData, e.value, e.defaultValue);
                // this.formData[e.value] = e.defaultValue;
              }
            });
          }
        },
        deep: true,
      },

      rules: {
        handler() {
          if (this.$refs.uForm) {
            this.$refs.uForm.setRules(this.rules);
          }
        },
        deep: true,
      },
    },
    data() {
      return {
        inputFlag: true,
        formData: {},
      };
    },
    methods: {
      async validate(e) {
        let yzminput = this.inputlist.find((e) => {
          return e.type == "yzm";
        });
        if (yzminput) {
          await this.$refs.formyzm[0].codeyz();
          this.$z.$cookie.setCookie(
            "WpassSmsflag",
            this.$store.state.user.USearch.uUser
          );
        }
        await this.$refs.uForm.validate();
        return this.formData;
      },
    },
    mounted() {},
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      // this.$refs.uForm.setRules(this.rules);
    },
  };
</script>
